<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: G
  Date: 2022/3/6
  Time: 15:30
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<base href="<%=basePath %>" />
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <script src="layui/layui.js"></script>
    <script src="scripts/jquery-2.1.4.min.js"></script>
</head>
<body>

<!--声明弹窗-->
<div id="addWin" style="display: none">
    <form id="pFrom" class="layui-form" lay-filter="testForm" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">商品名称</label>

                <input style="width: 200px;" type="hidden" name="id"  placeholder="请输入ID"  class="layui-input">

            <div class="layui-input-block">
                <input style="width: 200px;" type="text" name="name" required  lay-verify="required" placeholder="请输入商品名称" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">商品价格</label>
            <div class="layui-input-block">
                <input style="width: 200px;" type="text" name="price" required  lay-verify="required" placeholder="请输入商品价格" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">验证日期</label>
            <div class="layui-inline"> <!-- 注意：这一层元素并不是必须的 -->
                <input type="text" name="date" class="layui-input" id="Testdate">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">商品数量</label>
            <div class="layui-input-block">
                <input style="width: 200px;" type="text" name="quantity" required  lay-verify="required" placeholder="请输入商品数量" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>

<script>
    layui.use(['layer', 'form','table','laydate'], function(){
        var layer = layui.layer
            ,form = layui.form
            ,table = layui.table
            ,$=layui.jquery
            ,laydate = layui.laydate;
        table.render({
            elem: '#demo'
            ,toolbar: '#toolbarDemo'
            ,height: 600
            ,limit:6
            ,limits:[5,10]
            ,url: 'product/productListAll.do' //数据接口
            ,page: true //开启分页
            ,cols: [[ //表头	class="layui-btn layui-btn-normal"
                {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
                ,{field: 'name', title: '商品名', width:120}
                ,{field: 'price', title: '价格', width:80, ssort: true}
                ,{field: 'date', title: '进货时间', width:200}
                ,{field: 'quantity', title: '进货数量', width:100}
                ,{fixed: 'right', width:200, align:'center', toolbar: '#barDemo'}
            ]]
        });
        form.on('submit(formDemo)', function(data){
            $.post("product/AddOrUpdate.do",data.field,function (data) {
                alert(data.field)
                console.info(data)
                if(data.success==1){
                    //关闭窗口
                    $("#addWin").hide()
                    layer.closeAll();
                    //刷新数据
                    table.reload('demo');
                }else{
                    layer.msg(data.error);
                }
            })
            return false;
        });
        laydate.render({
            elem: '#Testdate' //指定元素
        });
        table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

            if(layEvent === 'detail'){ //查看
                //do something
                console.info(data)
            } else if(layEvent === 'del'){ //删除
                layer.confirm('真的删除行么', function(index){
                    //向服务端发送删除指令
                        $.post("product/delete.do",{id:obj.data.id},function (data) {
                        if(data.success>0){
                            layer.close(index)
                            table.reload('demo');
                        }
                    },"json")
                });
            }else if(layEvent === 'edit'){ //编辑
                layer.open({
                    type: 1,
                    area: ['400px', '400px'],
                    title:'修改商品',
                    content: $('#addWin'),
                    cancel: function(index, layero){
                        layer.close(index),
                            $("#addWin").hide()
                        return false;
                    }
                })
                form.val("testForm",obj.data);
            } else if(layEvent === 'LAYTABLE_TIPS'){
                layer.alert('Hi，头部工具栏扩展的右侧图标。');
            }
        });
        //给新增按钮绑定单击事件
        $("#addBtn").bind("click",function () {
            //重置表单数据
            $("#pFrom").get(0).reset();
            //弹出界面
            layer.open({
                type: 1,
                area: ['400px', '400px'],
                title:'新增商品',
                content: $('#addWin'),
                cancel: function(index, layero){
                    layer.close(index),
                    $("#addWin").hide()
                    return false;
                }
            });
        });

    });

</script>
<input id="addBtn" style="margin-left: 20px;margin-top: 20px" type="button" class="layui-btn layui-btn-normal" value="添加">
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<table id="demo" lay-filter="test"></table>
</body>
</html>
